<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <el-container style="border: 1px solid #eee;height: 659px">
        <el-header style="text-align: right; font-size: 12px;background-color: #c6e2ff;
                height: 90px;">
            <el-avatar :size="60" style="float: left;margin-top: 15px">
                <img src="https://img1.baidu.com/it/u=1909763149,4143884418&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"/>
            </el-avatar>
            <el-form :inline="true" :model="formInline" class="demo-form-inline"
            style="margin-top: 20px" v-show="flag">
                <el-form-item label="医院编号">
                    <el-input v-model="formInline.hoscode" placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item label="签名密匙">
                    <el-input v-model="formInline.signKey" placeholder="请输入密匙"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" v-loading="loading"
                               element-loading-spinner="el-icon-loading"
                               element-loading-text="拼命提交中"
                               :disabled="loading">提交认证</el-button>
                </el-form-item>
            </el-form>

            <el-button type="text" style="color: red"
                       v-show="!flag" @click="messagePrompt">已认证</el-button>

        </el-header>

        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu default-active="1" class="el-menu-vertical-demo"
                         background-color="#545c64" text-color="#fff"
                         active-text-color="#ffd04b">
                    <el-submenu index="1" :disabled="flag" :title="title">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>菜单导航</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">开始</template>
                            <el-menu-item  @click="menuRoute('hospitalSet.html')" index="1-1" >菜单一</el-menu-item>
                            <el-menu-item  @click="menuRoute('hospitalManage.html')" index="1-2">菜单二</el-menu-item>
                            <el-menu-item  @click="menuRoute('department.html')" index="1-3">菜单三</el-menu-item>
                            <el-menu-item  @click="menuRoute('schedule.html')" index="1-4">菜单四</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>

            <el-main>
                <div v-if="!display">
                    <h1 style="text-align: center;font-size: 35px;font-family: 华文行楷;"
                        >欢迎使用XXX系统</h1>
                    <el-carousel indicator-position="outside">
                        <el-carousel-item v-for="item in arr" :key="item" style="text-align: center">
                            <el-image :src="item" style="width: 90%;height: 100%"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <iframe :src="url" width="1235" height="523" align="left" v-if="display"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            flag: true,
            title: '进行认证后才可进行操作',
            arr: [
                "https://img0.baidu.com/it/u=2360350794,142583995&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=375",
                "https://img1.baidu.com/it/u=1909763149,4143884418&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
                "https://img1.baidu.com/it/u=4258065748,2909513537&fm=253&fmt=auto?w=889&h=500",
                "https://img1.baidu.com/it/u=454507449,1138691675&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
            ],
            formInline: {
                hoscode: '',
                signKey: ''
            },
            url: '',
            display: false,
            loading: false,
        },
        methods: {
            // 提交认证
            onSubmit() {
                let {hoscode , signKey} = this.formInline
                if (hoscode === '' || signKey === '') {
                    this.$message.error("请输入后再提交！")
                } else {
                    this.loading = true
                    axios.post(`/hospitalSet/checkSignKey`,this.formInline).then( ({data}) => {
                        // 回调
                        console.log(data)
                        if (data.code == 200) {
                            this.loading = false
                            this.flag = false
                            // 存储认证信息
                            sessionStorage.setItem("signKey",this.formInline.signKey)
                            sessionStorage.setItem("hoscode",this.formInline.hoscode)
                            this.$message({
                                type: 'success',
                                message: "认证成功！"
                            })
                            this.formInline = {hoscode: '', signKey: ''}
                        } else {
                            this.loading = false
                            sessionStorage.removeItem("signKey")
                            this.$message.error("认证失败！")
                        }
                    })
                }
            },
            // 点击已认证按钮时触发
            messagePrompt (){
                this.$message("已经完成认证，可以进行相应的操作")
            },
            // 改变路由
            menuRoute (url) {
                // console.log(url)
                this.url = url
                this.display = true
            },
        },
        created (){
            let signKey = sessionStorage.getItem("signKey")
            if (signKey != null && signKey !== '') {
                this.flag = false
                this.title = ''
            }
        }
    })
</script>
</body>
</html>